<template>
	<div class="admin">
		<el-container>
			<el-header>
				<el-row justify="space-between">
					<el-col :span="5">
						<h1 style="line-height: 60px;">XX书城后台管理系统</h1>
					</el-col>
					<el-col :span="3">
						<div class="userinfo">
							<img src="@/assets/img/user.png"/>
							<el-dropdown>
								<span class="el-dropdown-link">
								  {{userInfo.nickname}}
								  <el-icon><arrow-down /></el-icon>
								</span>
								<template #dropdown>
								  <el-dropdown-menu>
									<el-dropdown-item @click="outlogin()">退出登录</el-dropdown-item>
								  </el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
					</el-col>
				</el-row>
			</el-header>
			<el-container>
				<el-aside width="250px">
					<el-menu background-color="none" :router="true" style="height: 100vh;">
						<el-menu-item index="/admin/type">
							<el-icon><chicken /></el-icon>类型管理92版
						</el-menu-item>
						<el-menu-item index="/admin/type2">
							<el-icon><data-analysis /></el-icon>类型管理93版
						</el-menu-item>
						<el-menu-item index="/admin/book">
							<el-icon><coin /></el-icon>商品管理
						</el-menu-item>
						<el-menu-item index="/admin/banner">
							<el-icon><compass /></el-icon>热度图片
						</el-menu-item>
						<el-menu-item index="/admin/order">
							<el-icon><shopping-cart-full /></el-icon>订单发货
						</el-menu-item>
						<el-menu-item index="/admin/user">
							<el-icon><user /></el-icon>用户列表
						</el-menu-item>
						<el-menu-item index="/admin/adminuser">
							<el-icon><user-filled /></el-icon>管理员添加
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import Cookies from 'js-cookie';
import { ElMessage } from 'element-plus';
import {mapState} from 'vuex';
import {ArrowDown,Chicken,Coin,Compass,ShoppingCartFull,User,UserFilled,DataAnalysis} from '@element-plus/icons-vue';
export default{
	name:'Admin',
	components:{ArrowDown,Chicken,Coin,Compass,ShoppingCartFull,User,UserFilled,DataAnalysis},
	computed:{
		...mapState(['userInfo']),
	},
	methods:{
		//退出登录
		outlogin(){
			this.PushMsg('success','已退出登录！')
			this.$store.commit('outlogin');
			this.$router.push('/home')
		},
		//获取用户信息
		getUser(){
			this.axios.get('/api/info/getUser').then((res)=>{
				//用户已登录
				this.$store.commit('setUserInfo',res.data);
				localStorage.role = res.data.role;
				localStorage.account = res.data.account;
				localStorage.nickname = res.data.nickname;
				localStorage.Online=true;
				this.showLoginView=false;
				this.$store.commit('onlogin')
				if(res.data.role=="G"){
					this.PushMsg('success','欢迎回来！'+res.data.nickname)
				}else if(res.data.role=="P"){
					//该账号无管理员权限
					//跳转到前台
					this.PushMsg('error','非管理员权限禁止进入后台！')
					this.$router.push('/home')
				}
			}).catch((err)=>{
				this.$store.commit('outlogin');//清除用户登录痕迹
				this.PushMsg('error','获取用户信息异常！')
				this.$router.push('/home')
			})
		},
		//弹出消息提示
		PushMsg(type,message){
			if(type=='error'){
				ElMessage.error({
					message: message,
				})
			}else{
				ElMessage({
					message: message,
					type: type,
				})
			}
			
		}
	},
	created() {
		this.getUser();//获取用户信息
	}
}
</script>

<style scoped>
*{padding: 0;margin: 0;list-style: none;}
.el-container{
	display: flex;
	height: 100vh;
}
.el-main{
	padding: 0;
}
.admin header{
	color: white;
	height: 60px;
	background:linear-gradient(131deg,#000056,#162651);
}
.admin ul li a{
	color: var(--el-text-color-primary);
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
}
.el-menu-item{
	margin-left: 20px;
	color: var(--el-text-color-primary);
}
.el-dropdown-link{
	color: white;
}
.userinfo{
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	cursor: pointer;
}
.userinfo img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 10px;
}
</style>
